import Vue from "vue";

// v-dialogDrag: 弹窗拖拽指令
Vue.directive("dialogDrag", {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector(".el-dialog__header");
    const dragDom = el.querySelector(".el-dialog");

    dialogHeaderEl.style.cursor = "move";

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    /**
     *
     *
     * @param {*} e
     */

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;
      // 获取到的值带px 正则匹配替换

      let styL, styT;
      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px

      if (sty.left.includes("%")) {
        styL =
          Number(document.body.clientWidth) *
          (Number(sty.left.replace(/\%/g, "")) / 100);
        styT =
          Number(document.body.clientHeight) *
          (Number(sty.top.replace(/\%/g, "")) / 100);
      } else {
        styL = Number(sty.left.replace(/\px/g, ""));
        styT = Number(sty.top.replace(/\px/g, ""));
      }
      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        const t = e.clientY - disY;
        // 移动当前元素

        dragDom.style.left = `${l + styL}px`;
        dragDom.style.top = `${t + styT}px`;
        //将此时的位置传出去
        //binding.value({x:e.pageX,y:e.pageY})
      };
      document.onmouseup = function(e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});

// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive("dialogDragWidth", {
  bind(el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector(".el-dialog");

    el.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft;

      document.onmousemove = function(e) {
        e.preventDefault(); // 移动时禁用默认事件
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;

        dragDom.style.width = `${l}px`;
      };
      document.onmouseup = function(e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});

/* 只能输入正整数 */
Vue.directive("enterNumber", {
  inserted: function(el) {
    el.addEventListener("keypress", function(e) {
      e = e || window.event;
      let charcode = typeof e.charCode === "number" ? e.charCode : e.keyCode;

      let re = /\d/;

      if (
        !re.test(String.fromCharCode(charcode)) &&
        charcode > 9 &&
        !e.ctrlKey
      ) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    });
  },
});

/* 只能输入正整数 包含小数 */
Vue.directive("enterNumber2", {
  inserted: function(el) {
    el.addEventListener("keypress", function(e) {
      e = e || window.event;
      let charcode = typeof e.charCode === "number" ? e.charCode : e.keyCode;

      let re = /\d/;

      if (charcode == 46) {
        if (el.value.includes(".")) {
          e.preventDefault();
        }
        return;
      } else if (
        !re.test(String.fromCharCode(charcode)) &&
        charcode > 9 &&
        !e.ctrlKey
      ) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    });
  },
});

function onInput(el, ele) {
  function handle() {
    // 只保留数字
    ele.value = ele.value.replace(/[^\d]/g, "");
  }

  return handle;
}
const numberInput = {
  bind(el, binding, vnode) {
    const ele = el.tagName === "INPUT" ? el : el.querySelector("input");

    ele.addEventListener("input", onInput(el, ele, binding, vnode), false);
  },
};

Vue.directive("number-input", numberInput);
